<template>
  <div class="three-day-ranking-table">
    <ul>
      <h4>{{days + '天内'+ type }}排行</h4>
      <li v-for="(item, index) in items" :key="item.fileId" >
        <span class="index">{{ index + 1 }}</span>
        <span class="content" @click="filePreview(item.fileId)" >{{ item.fileName }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {getdaysRanking} from "@/api/home/home"
export default {
  props:{
    days:{
      type:Number,
      default:3
    }
  },
  data() {
    return {
      userId:this.$store.getters.userId,
      type: "下载",
      items: [
        { fileId: 1, fileName: "技术越来越成熟，但为什么阻止？" },
        { fileId: 2, fileName: "技术越来越成熟，但为什么阻止不了宕机？" },
        { fileId: 3, fileName: "技术越来越成熟，但为什么阻止不了宕机？" },
        { fileId: 4, fileName: "技术越来越成熟，但为什？" },
        { fileId: 5, fileName: "技术越来越成熟，但为什么阻止不了宕机？了宕机" },
        {
          fileId: 6,
          fileName:
            "技术越来越成熟，但为什么阻止不了宕机？了宕机技术越来越成熟，但为什么阻止不了宕机？了宕机",
        },
      ],
    };
  },
  methods: {
    //跳转详情页
    filePreview(fileId) {
      this.$router.push({
        path:'/docdetail',
        query: {
          id: fileId
        }
      })
    }
  },
  created() {
    let data = {
      userId : this.userId,
      days : this.days
    }
    // console.log(data)
    getdaysRanking(data)
      .then((res)=>{
        // console.log(res);
        this.items = [];
        for (let i in res.data) {
          this.items.push(res.data[i])
        }
      }).catch((err)=>{
        console.log(err);
      })
  }
};
</script>

<style scoped>
.three-day-ranking-table {
  width: 300px;
  min-height: 200px;
  margin-bottom: 32px;
}
h4 {
  color: #797979;
  margin-bottom: 8px;
}
ul {
  padding: 0;
  margin: 0;
  margin-left: 32px;
  list-style: none;
}
li {
  min-height: 20px;
  margin-bottom: 6px;

}
li > .index {
  color: #a3a4a6;
  line-height: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
}
li > .content {
  font-size: 14px;
  display: inline-block;
  width: 250px;
  vertical-align: top;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
li > .content:hover {
  color: #67abe4;
}
</style>
